import useSearch from '@renderer/hooks/useSearch'
import { useEngineStore, useThemeStore } from '@renderer/stores'
import { Button, Segmented, Popconfirm } from 'antd'
import React from 'react'
import type { SegmentedProps } from 'antd'

interface SettingPanelProps {
  handleCloseSettingPanel: () => void
}

const SettingPanel = ({ handleCloseSettingPanel }: SettingPanelProps) => {
  const { engine, setEngine } = useEngineStore()
  const { searchConfig } = useSearch()
  const { isDark } = useThemeStore()
  const getIconColor = (key: EngineType) => {
    return key === engine ? '#3b92ff' : isDark ? 'white' : 'black'
  }
  const options: SegmentedProps['options'] = Object.entries(searchConfig).map(
    ([key, instance]) => ({
      label: (
        <div>
          {React.cloneElement(instance.icon, {
            style: { fontSize: '15px', color: getIconColor(key as EngineType) }
          })}
          <div>{instance.label}</div>
        </div>
      ),
      value: key,
      title: instance.label
    })
  )
  return (
    <div
      className={[
        'h-[120px] p-2 relative',
        `${isDark ? 'bg-[#141414] text-[#dcdcdc]' : ' text-gray-800'}`
      ].join(' ')}
    >
      <div className="w-full flex justify-center items-center">
        <Segmented options={options} onChange={(value) => setEngine(value as EngineType)} block />
      </div>

      <div className="w-full flex justify-center items-center mt-2 space-x-5">
        <Button block onClick={() => window.electron.ipcRenderer.send('create-setting-window')}>
          更多设置
        </Button>
        <Button block onClick={() => handleCloseSettingPanel()}>
          关闭设置
        </Button>

        <Popconfirm
          title="提示"
          description="确定要退出应用吗？"
          onConfirm={() => window.electron.ipcRenderer.send('close-all-processes')}
          okText="确定"
          cancelText="取消"
        >
          <Button danger block>
            退出应用
          </Button>
        </Popconfirm>
      </div>
    </div>
  )
}

export default SettingPanel
